{% extends "base.html" %}
{% block stylesheet %}
  <link rel="stylesheet" type="text/css" href="/site_media/css/product.css" />
  <link rel="stylesheet" type="text/css" href="/site_media/fancybox/jquery.fancybox-1.3.1.css" />
{% endblock %}
{% block script %}
  <script type="text/javascript" src="/site_media/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
  <script type="text/javascript" src="/site_media/js/modify_cart.js"></script>
  <script type="text/javascript" src="/site_media/js/modify_comment_votes.js"></script>
{% endblock %}
{% block title %}| {{ product.name }} {% endblock %}
{% block content %}
        <div id="product-content">
            <div id="content-navigation">
                <a href="/">Home</a> >> <a href="/search/?category={{product.subcategory.category.name}}">{{ product.subcategory.category.name }}</a> >> <a href="/search/?category={{product.subcategory.category.name}}&subcategory{{ product.subcategory.name }}={{ product.subcategory.id }}">{{ product.subcategory.name }}</a> >> {{product.name}}
            </div><!-- the end for content-navigation -->
            <div id="product-info">
                <div class="product-info-div" style="width:300px;">
                    <center><img src="/{{ product.image }}"/></center><br/>
                    <center><a href="#comments">Comments({{ product.comments.all|length }})</a></center>
                </div>
                <div id="success_info_box" style="display:none; width: 430px;">
                    <div style="float:left; padding-top: 5px; margin-right: 15px; height: 120px;"><img src="/site_media/images/tick.png" height="35" width="35" /></div>
                    <div>
                        <font style="font-size: 16px; font-weight:bold; line-height:200%">This good is successfully added to the cart!</font>
                        <br>
                        <font style="font-size: 14px; line-height: 200%; text-align: left;">There are <span id="goods_amount"></span> goods in your cart. Total prices is:&nbsp;</font><font style="color:red; font-size:16px; font-weight: bold"><span id="total_price"></span></font>€
                        <br><br>
                    </div>
                    <a href="/cart/"><img src="/site_media/images/icon_checkout.gif" alt="checkout" /></a>
                </div>
                <div class="product-info-div" style="width:480px;">
                    <p class="product-title">{{ product.name }}</p>
                    <p>Price: <font size="6" color="#f91b00">{{ product.price }}</font> €</p>
                    <p>Category: <a href="/search/?category={{product.subcategory.category.name}}">{{ product.subcategory.category.name }}</a>, <a href="/search/?category={{product.subcategory.category.name}}&subcategory{{ product.subcategory.name }}={{ product.subcategory.id }}">{{ product.subcategory.name }}</a></p>
                    <p>Rate:
                    {% if product.rate_img %}
                        <img src="/site_media/images/rate-{{product.rate_img}}.jpg"/> {{ product.product_rates_value.value }} ({{ product.product_rates_value.count }} people have rated.)
                    {% else %}
                        <img src="/site_media/images/rate-0.jpg"/> (No rating now)
                    {% endif %}
                    </p>
                    {% if product.inventory_records.available %}
                        {% ifequal product.inventory_records.available 0 %}
                            <span class="product-not-available">Sorry, out of stock.</span> 
                        {% else %}
                    <form method="post" action="." class="product-buy-block">{% csrf_token %}
                        <input type="text" name="buy-amount" id="buy-amount-text" /><a id="success_info_trigger" onclick="show_success_info()" href="#success_info_box"><img id="add-to-cart" src="/site_media/images/add-to-cart.jpg" alt="Add to cart" style="position:absolute" /></a>
                        <span class="product-available">(There are {{ product.inventory_records.available|default:0 }} available.)</span>
                        <input type="hidden" id="product-id" name="product-id" value="{{product.id}}" />
                    </form>
                        {% endifequal %}
                    {% else %}
                       <span class="product-not-available">Sorry, out of stock.</span> 
                    {% endif %}
                </div>
            </div><!-- the end for product-info -->
            <h3 class="block-title">Product Description</h3>
            <div id="product-description">
                {% autoescape off %}{{ product.description }}{% endautoescape %}
            </div><!-- the end for product-description -->
            <h3 class="block-title" id="comments">Comments</h3>
            <div id="product-comments">
            <form action="javascript:void(0)" method="post">{% csrf_token %}
            {% if comments %}
                {% for comment in comments %}
                <div class="one-comment-div">
                    <div class="comment-top-bar float-farther-div">
                        <div class="comment-author float-left">Discussant: <font color="#1A66B3">{{comment.user.username}}</font></div>
                        <div class="comment-time float-right">{{comment.created|date:'d/m/Y f a'}}</div>
                    </div>
                    <div class="comment-middle">
                        {{comment.content}}
                    </div>
                    <div class="comment-bottom-bar float-farther-div">
                        <div class="comment-value float-left">
                            <span id="useful_num_{{comment.order_detail_id}}">{{comment.useful_num}}</span>/<span id="total_num_{{comment.order_detail_id}}">{{comment.total_num}}</span> people think this comment is usefull.
                            <input type="image" onclick="comment_votes(1,{{comment.order_detail_id}})" src="/site_media/images/good-mark.png" width="18px" alt="Useful" /></span>
                            |
                            <input type="image" onclick="comment_votes(0,{{comment.order_detail_id}})" src="/site_media/images/down.png" width="18px" alt="Unuseful"/>
                        </div>
                        <div class="comment-replys float-right">
                            <input type="button" onclick='window.location.href="/products/comment/reply/{{comment.order_detail_id}}/"' value="Replies({{comment.reply_num}})" />
                        </div>
                    </div>
                </div>
                {% endfor %}
            <p class="page-bar-p">{% include "page_bar.html" %}</p>
            {% else %}
                <font color="#999" size="1">No comments.</font>
            {% endif %}
            </form>
            </div><!-- the end for product-comments -->
        </div><!-- the end for product-content -->
{% endblock %}